<template>
  <div>
    <div class="category bg-white pt-10 border">
      <dl>
        <dt class="text-ftcolor-3 fs-16 fw-b pb-10 pl-10">全部分类</dt>
        <dd class="d-flex jc-between ai-center px-10"
        @mouseover="$refs.content.style.display = 'block'"
        @mouseleave="$nextTick(()=>{$refs.content.style.display = 'none'})"
        >
          <div>
            <i class="el-icon-position mr-5"></i>
            <a class="text-ftcolor-2" href="#">美食</a>
          </div>
          <div class="right text-ftcolor-1">&gt;</div>
        </dd>
      </dl>
      <div class="content p-30 bg-white border" ref="content">
        <div>
          <div class="d-flex jc-between ai-center pb-10 border-bottom">
            <a href="#" class="fs-16 text-ftcolor-3">美食</a>
            <span class="fs-12 text-ftcolor-1">更多&gt;</span>
          </div>
          <div style="margin-left:-10px;">
            <a href="#" class="fs-12 py-10 mx-10 text-ftcolor-1">代金券</a>
            <a href="#" class="fs-12 py-10 mx-10 text-ftcolor-1">代金券</a>
            <a href="#" class="fs-12 py-10 mx-10 text-ftcolor-1">代金券</a>
            <a href="#" class="fs-12 py-10 mx-10 text-ftcolor-1">代金券</a>
            <a href="#" class="fs-12 py-10 mx-10 text-ftcolor-1">代金券</a>
            <a href="#" class="fs-12 py-10 mx-10 text-ftcolor-1">代金券</a>
            <a href="#" class="fs-12 py-10 mx-10 text-ftcolor-1">代金券</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/_varibles.scss';
.category {
  position:relative;
  width: 228px;
  height: 447px;
  margin-top: -40px;
  box-sizing: border-box;
  dd {
    margin: 10px 0;
    font-size: 14px;
    &:hover {
      background: rgb(250, 235, 201);
      a {
        font-weight: bold;
      }
      .right {
        color: map-get($colors, 'ftcolor-2')
      }
    }
  }
  .content {
    position: absolute;
    left: 228px;
    top: 40px;
    border-left: none;
    width: 400px;
    height: 386px;
    box-sizing: border-box;
    display: none;
    z-index: 999;
    &:hover {
      display: block !important;
      a:hover {
        color: map-get($colors, 'primary')
      }
    }
  }
}
</style>
